import {Form} from 'antd';
import React, {useEffect} from 'react';
import "./index.css";
import {EditProps} from "@/assets/components/editProps";
import {createEditor} from "@/assets/utils/utils";
import E from "wangeditor";

/**
 * 列表组件
 * @param props
 * @constructor
 */
const Edit = (props: EditProps) => {
  let editor: E;
  /**
   * 启动加载
   */
  useEffect(() => {
    // 创建富文本框
    editor = createEditor(props.name + "Editor", (newHtml: string) => {
      props.form.setFieldsValue({[props.name]: newHtml})
    })
    // 设置初始值
    editor.txt.append(props.initialValue || "")
    return () => {
      // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
      editor && editor.destroy()
    }
  }, [props.initialValue]);

  return (
    <Form.Item
      key={props.name}
      name={props.name}
      label={props.label}
      rules={[props.required ? {required: true, message: props.label + '为必填项',} : {}]}
    >
      <div id={props.name + "Editor"} style={{zIndex: 0, position: 'relative'}}></div>
    </Form.Item>
  )
};

export default Edit;
